<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>美团手机端</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
</head>

<body>
	<header>
		<ul>
			<li>广州
				<i class="iconfont icon-xiangxia"></i>
			</li>
			<li>
				<i class="iconfont icon-fangdajing"></i>
				<input type="text" placeholder="请输入商家/品类/商圈">
			</li>
			<li>
				<i class="iconfont icon-wode"></i>我的</li>
		</ul>
		<div class="down">
			<!-- <img src="img/365.jpg" alt=""> -->
		</div>
	</header>
	<nav>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide nav1">
					<ul class="nav-conntent nav-a">
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-meishi"></i>美食</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-dianying"></i>电影</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-jiudian"></i>酒店</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-xiuxianyule"></i>休闲娱乐</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-waimai"></i>外卖</a>
						</li>

					</ul>
					<ul class="nav-conntent nav-b">
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-baoji"></i>KTV</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-zhoubianyou"></i>周边游</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-liren"></i>丽人</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-xiaochikuaican"></i>小吃快餐</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-huochepiao"></i>机票/火车票</a>
						</li>
					</ul>
				</div>
				<div class="swiper-slide nav2">
					<ul class="nav-conntent nav-c">
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-lvyou"></i>旅游</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-jinrixindan"></i>今日订单</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-shenghuofuwu"></i>生活服务</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-zuliao"></i>足疗按摩</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-icecreamcorn2l"></i>甜点饮品</a>
						</li>

					</ul>
					<ul class="nav-conntent nav-d">
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-muyingqinzi"></i>母婴亲子</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-zhoubianyou"></i>学习培训</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-jiehun"></i>结婚</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-jiazhuang"></i>家装</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class="iconfont icon-diandiandian"></i>全部分类</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 添加翻页 -->
			<div class="swiper-pagination"></div>
		</div>
	</nav>
	<section>
		<div class="concent">
			<div class="concent-left">
				<a href="###">
					<h3>我们约会吧</h3>
					<p>恋人家人好朋友</p>
					<p>
						<img src="./src/img/yuehui.png" alt="">
					</p>
				</a>
			</div>
			<div class="concent-right">
				<div class="concent-right-top">
					<a href="###">
						<dl>
							<dt>低价超值</dt>
							<dd>十元惠生活</dd>
						</dl>
						<p>
							<img src="./src/img/215.jpg" alt="">
						</p>
					</a>
				</div>
				<div class="concent-right-bottom">
					<div class="rbox1">
						<a href="###">
							<h3>工作简餐</h3>
							<p>实惠方便选择多</p>
							<p>
								<img src="src/img/155.png" alt="">
							</p>
						</a>
					</div>
					<div class="rbox2">
						<a href="###">
							<h3>名店抢购</h3>
							<p>距离结束</p>
							<span>
								<i>21</i>:
								<i>00</i>:
								<i>59</i>
							</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="guess-foodlist">
			<h2>猜你喜欢</h2>
			<ul class="list">
					<!-- <li class="foodspic">
							<a href="###" class="clearfix">
								<img src="img/78454.jpg" alt="">
								<dl>
									<dt>真功夫</dt>
									<dd>
										<p class="foodtitle">[广州等]冬(香)菇鸡腿肉饭+卤蛋1份</p>
										<p class="price">
											<span><strong>16</strong><i>元</i></span>
											<span>新用户5元5元抢</span>
											<span>已售15451</span>
										</p>
									</dd>
								</dl>
							</a>
						</li> -->
			</ul>
			<div class="seemore">
				<button>
					<span>查看全部团购</span>
					<span>&gt;</span>
				</button>
			</div>
		</div>
	</section>
	<p>
		<i class="iconfont icon-xiangshang" id="gotop"></i>
	</p>
	<footer>
		<div class="footer-top">
			<p>
				<button>登录</button>
				<button>注册</button>
				<span class="currentcity">城市：
					<strong>广州</strong>
				</span>
			</p>
		</div>
		<div class="footer-center">
			<ul>
				<li>
					<a href="###">首页</a>
				</li>
				<li>
					<a href="###">订单</a>
				</li>
				<li>
					<a href="###">客户端</a>
				</li>
				<li>
					<a href="###">电脑版</a>
				</li>
			</ul>
		</div>
		<div class="footer-bottom">
			友情链接：
			<a href="###">猫眼电影</a>
		</div>
		<div class="copyright">
			<form>
				<fieldset>
					<legend>&copy;2016 美团网 京ICP证070791号</legend>
				</fieldset>
			</form>
		</div>
	</footer>
	<script src="./src/js/jquery-1.7.2.min.js"></script>
	<script src="./src/plug/js/swiper.jquery.min.js"></script>
	<!-- 加载插件js代码 -->
	<script src="./out/index.js"></script>
	<script>
		$(function () {
			//初始化插件实例
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true,
				loop: 'true',
				effect: 'cube',
				cube: {
					shadow: false,
					slideShadows: false,
				}
			});
		});

	</script>
</body>

</html>